<template>
	<view class="login">
		<view class="bg">
			<image class="img wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/login_bg.png"></image>
			<view class="icon" @click="goBack">
				<image class="img wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"></image>
			</view>
		</view>
		<view class="card">
			<view class="title">{{ "白菜出国" }}
				<view class="diwen"></view>
			</view>
			<view class="ft1 mt-20 c-99" style="font-weight: 400">{{
				"移民白菜价·买贵补差价"
			}}</view>
			<view class="input">
				<up-input placeholder="请输入手机号" type="number" clearable border="none" v-model="loginParams.phone"
					@blur="blur"></up-input>
			</view>
			<view class="ft-22 ml-10 mt-4" style="color:#FF0000" v-show="!phonemsg">请输入正确手机号</view>
			<view class="mt-24 flex">
				<view class="captcha  flex-center">
					<up-input placeholder="请输入验证码" type="number" clearable border="none"
						v-model="loginParams.captcha"></up-input>
				</view>
				<view class="getCaptaBtn ml-20 flex-center ft" @click="getCode">{{ isSend ? `(${num}s)验证码` : '获取验证码' }}
				</view>
			</view>

			<view class="phone flex-center ft c-dbf" @click="submit">确定</view>
		</view>
		<view class="xieyi flex">
			<view class="checkBtn mr-10" v-if="!isCheck" @click="isCheck = true"></view>
			<image class="checkImg mr-10" v-else @click="isCheck = false"
				src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" />

			<text class="ft ft-20">我已阅读并同意<text class="c-bbq">《白菜出国服务协议》</text>、<text
					class="c-bbq">《白菜出国隐私政策》</text></text>
		</view>
	</view>
	<view class="delete_box" ref="diaLogPop" v-if="show">
		<view class="bg"></view>
		<view class="delete_model bd-r40">
			<view class="ft-32 c-33 fw-800 mt-30">温馨提示</view>
			<view class="c-99 ft-28 text pd-30">
				<view class="ft ft-28">
					我已阅读并同意
					<text class="c-bbq" style="color: #1F18EE;">《白菜出国服务协议》</text>、<text class="c-bbq"
						style="color: #1F18EE;">《白菜出国隐私政策》</text>
				</view>
			</view>
			<view class="btn_model flex-eve">
				<view class="btn" @click="cancel">不同意</view>
				<view class="btn sunbmit" @click="submit">同意
					<!-- <button class="wexin  flex-center ft c-33 hidden-share-btn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber" @tap="showPop"></button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="js" setup>
import {
	ref
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onHide,
	onLoad
} from "@dcloudio/uni-app";

const isSend = ref(false)
const num = ref(60);
let timer = null;
const phonemsg = ref(true)
const blur = () => {
	phonemsg.value = /^1[3-9]\d{9}$/.test(loginParams.value.phone)
	console.log('phonemsg.value', phonemsg.value)

}
const getLoginData = () => {
	// APP端逻辑
	// #ifdef APP-PLUS
	let clientid = uni.getStorageSync('clientid')
	console.log('plus', clientid)
	utils.request(api.sendVerifyCode, {
		clientid: clientid,
		phone: loginParams.value.phone
	}).then((data) => {
		console.log(data.data.code, "data>>>>");
		utils.toast('验证码已发送')
		isSend.value = true;
		loginParams.value.captcha = data.data.code;
		timer = setInterval(() => {
			if (num.value > 0) {
				num.value--
			} else {
				isSend.value = false;
				num.value = 60;
				clearInterval(timer)
			}
		}, 1000)
	}).catch((err) => {
		console.log('err', err)
	})
	// #endif

	// #ifdef MP

	if (isSend.value) return
	wx.login({
		success(res) {
			console.log('code', res)
			if (res.code) {
				//发起网络请求
				console.log(res.code, "66");
				utils.request(api.codeUserInfo, {
					code: res.code
				}).then(function (res) {
					if (res) {
						uni.setStorageSync("openid", res.data.info.openid)
						utils.request(api.sendVerifyCode, {
							openid: res.data.info.openid,
							phone: loginParams.value.phone
						}).then((data) => {
							console.log(data.data.code, "data>>>>");
							utils.toast('验证码已发送')
							isSend.value = true;
							loginParams.value.captcha = data.data.code;
							timer = setInterval(() => {
								if (num.value > 0) {
									num.value--
								} else {
									isSend.value = false;
									num.value = 60;
									clearInterval(timer)
								}
							}, 1000)
						})
					}
				});
			} else {
				console.log('登录失败！')
			}
		}
	})
	// #endif
}



const loginParams = ref({
	phone: '',
	captcha: ''
})

const isCheck = ref(false)
const goBack = () => {
	uni.navigateBack()
}

const show = ref(false)
const cancel = () => {
	show.value = !show.value
}
const loginFn = () => {
	utils.request(api.verifyCodeLogin, {
		phone: loginParams.value.phone,
		code: loginParams.value.captcha
	}).then((data) => {
		console.log(data.data, '登录数据');
		if (data.code === 200) {
			utils.toast('登录成功')
			uni.setStorageSync("token", data.data.info.token)
			uni.setStorageSync("userInfo", data.data.info)
			uni.navigateBack({
				delta: 2
			})
		} else {
			utils.toast(data.message)
		}

	})
}
const submit = () => {
	if (!phonemsg.value) return

	if (loginParams.value.phone === '') {
		utils.toast('请输入手机号')
	} else if (loginParams.value.captcha === '') {
		utils.toast('请先获取验证码')
	} else {
		if (show.value) {
			isCheck.value = true
			cancel()
		}
		if (isCheck.value) {
			// 如果用户已经勾选过订阅 则直接登录 否则执行订阅过程
			// #ifdef MP
			if (isSettings.value) {
				loginFn()
			} else {
				wx.requestSubscribeMessage({
					tmplIds: ['gi4DUScen8cZatx7SQRlKrnrDW5q7AUd7va3AnvGRQA'],
					success(res) {
						console.log('res', res)
						utils.subscribeMessage(res)

					}, fail(err) {

						console.log('err', err)
					}
					, complete(res) {
						if (res['gi4DUScen8cZatx7SQRlKrnrDW5q7AUd7va3AnvGRQA'] == 'accept') { }
						loginFn()
					}
				})
			}

			// #endif
			// #ifdef APP-PLUS
			loginFn()
			// #endif

		} else {
			show.value = true

		}

	}

}

const getCode = () => {

	if (utils.isMobile(loginParams.value.phone)) {
		getLoginData()
	}
}

onHide(() => {
	clearInterval(timer)
})
const isSettings = ref(false)

onLoad(() => {
	wx.getSetting({
		withSubscriptions: true,
		success(res) {
			// console.log('onLoad', res)
			if (res.subscriptionsSetting.itemSettings) {

				if (res.subscriptionsSetting.itemSettings['gi4DUScen8cZatx7SQRlKrnrDW5q7AUd7va3AnvGRQA']) isSettings.value = true
			}
		}
	})
})
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	// overflow-x: hidden;
	position: relative;

	.bg {
		position: relative;
		width: 750rpx;
		height: 454rpx;

		.icon {
			position: absolute;
			left: 30rpx;
			top: 108rpx;
			width: 28rpx;
			height: 48rpx;
		}
	}

	.card {
		box-sizing: border-box;
		position: absolute;
		top: 384rpx;
		left: 0;
		//border: 2rpx solid red;
		width: 750rpx;
		z-index: 99;
		height: 1040rpx;
		background: #ffffff;
		border-radius: 80rpx 0rpx 0rpx 0rpx;
		padding-left: 120rpx;
		padding-top: 120rpx;

		.title {
			//border: 2rpx solid red;
			//height: 60rpx;
			font-weight: 800;
			font-size: 44rpx;

			color: #333333;
			position: relative;

			.diwen {
				position: absolute;
				z-index: -1;
				left: 0rpx;
				top: 44rpx;
				width: 184rpx;
				height: 20rpx;
				background: #dbf046;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
			}
		}

		.phone {
			width: 510rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 60rpx;
		}

		.wexin {
			width: 510rpx;
			height: 78rpx;
			background: #dbf046;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
		}

		.input {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 12rpx;
			padding-right: 12rpx;
			width: 510rpx;
			height: 78rpx;
			background: #f8f8f8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 120rpx;
		}

		.captcha {
			padding-left: 12rpx;
			padding-right: 12rpx;
			width: 294rpx;
			height: 78rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.getCaptaBtn {
			width: 196rpx;
			height: 78rpx;
			background: #DBF046;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.xieyi {
		position: absolute;
		left: 46rpx;
		top: 1440rpx;
		z-index: 999;
		width: 658rpx;
		height: 32rpx;

		.checkBtn {
			width: 26rpx;
			height: 26rpx;
			border: 2rpx solid #333;
			border-radius: 50%;
		}

		.checkImg {
			width: 30rpx;
			height: 30rpx;
		}
	}
}

.delete_box {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		// height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
			min-height: 140rpx;
		}

		.btn_model {
			margin-bottom: 30rpx;

			.btn {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
				position: relative;

				.hidden-share-btn {
					opacity: 0;
					position: absolute;
					width: 184rpx;
					height: 80rpx;
					left: 0;
					top: 0;
				}
			}
		}
	}

}
</style>